<div id="notification">

  <div id="notification-main">
    <div id="notification-container">

      <!--  选择要显示通知的项目-->
      <div class="notification-sift">
        <span class="sift-label">按项目筛选:</span>
        <select class="form-control"
                  ng-model="showCondition.project_id"
                  ng-options="project.id as project.name for project in projectList"
                  ng-change="reloadByProject()">
            <option value="">所有项目</option>
        </select>
      </div>


      <div class="notification-none text-center" ng-hide="notificationList.length">
        <p class="text-info lead" ng-hide="showCondition.read">没有未读通知</p>
        <p class="text-info lead" ng-show="showCondition.read">没有已读通知</p>
      </div>
      <div class="notification-list">

      <!--选择已读和未读的通知框-->
      <div read-status-switch class="read-sift" on-label="已读" off-label="未读" read-condition="readCondition" ></div>

      <div class="notification-list">

        <div class="notification-item" ng-repeat="notification in notificationList">


          <div class="notification-box" >
            <img ng-src="img/userHeadImage/{{ notification.trigger.head_image}}" alt="{{notification.trigger.username}}"/>
            <div class="notification-detail">
              <p class="notification-title" ng-click="goToState(notification)">
                {{ notification.title }}
              </p>
              <p class="notification-content">
                {{ notification.content }}
              </p>
              <div class="date">
                {{ notification.created_at }}
              </div>

              <div class="set-read" ng-hide="notification.read">
                <span class="set-label" ng-click="setRead(notification)" ><i class="fa fa-flag"></i> 设为已读</span>

              </div>

            </div>

          </div>

          <div class="notification-icon">
            <i class="fa fa-tasks"></i>
          </div>

        </div>

        <!-- Demo--
        <div class="notification-item">
          <div class="notification-box">
            <img src="image/test-head.jpeg" alt="cifang"/>
            <div class="notification-detail">
              <p class="notification-title">
                Rocky 今晚打老虎
              </p>
              <p class="notification-content">
                在那荒茫美丽马勒戈壁有一群草泥马
              </p>
            </div>
            <div class="date">
              4月9日 12:20
            </div>

          </div>

          <div class="notification-icon">
            <i class="fa fa-tasks"></i>
          </div>

        </div>

        <div class="notification-item">
          <div class="notification-box">
            <img src="image/test-head.jpeg" alt="cifang"/>
            <div class="notification-detail">
              <p class="notification-title">
                Rocky 今晚打老虎
              </p>
              <p class="notification-content">
                在那荒茫美丽马勒戈壁有一群草泥马
              </p>
            </div>
            <div class="date">
              4月9日 12:20
            </div>

          </div>

          <div class="notification-icon">
            <i class="fa fa-tasks"></i>
          </div>

        </div>

        <div class="notification-item">
          <div class="notification-box">
            <img src="image/test-head.jpeg" alt="cifang"/>
            <div class="notification-detail">
              <p class="notification-title">
                Rocky 今晚打老虎
              </p>
              <p class="notification-content">
                在那荒茫美丽马勒戈壁有一群草泥马
              </p>
            </div>
            <div class="date">
              4月9日 12:20
            </div>

          </div>

          <div class="notification-icon">
            <i class="fa fa-tasks"></i>
          </div>-->

        </div>
      </div>





    </div>
    <img src="image/loading.gif" alt="loading" ng-show="pagination.getShowLoading()"/>
    <!--
    <div ng-controller="PaginationMainController">
      <pagination total-items="totalItems" ng-model="currentPage" ></pagination>
    </div>-->
  </div>

  <div class="row">
    <div class="col-sm-offset-4 col-sm-4">
      <p class="text-info bg-info text-center lead" ng-show="pagination.getFinishLoading() && notificationList.length">已经没有更多的通知</p>
    </div>
  </div>

</div>